<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <NavBar :isShowIcon="false" />

        <!-- 地区选择和长者版 -->
        <view class="top-bar u-flex u-row-between u-row-center">
            <view class="head-left">
                <view class="shortcut-item">
                    <u-icon name="scan" color="#2979ff" size="28" @click="scanCodeHandle"></u-icon>
                </view>
                <view class="location-bar">
                    <!-- <u-icon name="map" size="22" color="#333"></u-icon> -->
                    <view class="location-text" @click="showPicker = true">
                        {{ selectedRegionText }}
                        <u-icon name="arrow-down" size="16" color="#333" style="margin-left: 4rpx" />
                    </view>
                    <!-- 省市区多级选择器 -->
                    <u-picker :show="showPicker" :columns="columns" :defaultIndex="selectedIndex"
                        @change="onPickerChange" @confirm="onRegionConfirm" @cancel="showPicker = false"
                        keyName="label"></u-picker>
                </view>
            </view>
            <view class="head-right">
                <text class="weather">བཀྲ་ཤིས་བདེ་ལེགས།</text>
                <u-tag text="长者版" type="warning" size="mini" plain></u-tag>
            </view>
        </view>

        <!-- 轮播图 -->
        <u-swiper class="swiper-list" :list="bannerList" height="160" indicator indicatorMode="line"
            circular></u-swiper>

        <!-- 最新上线 -->
        <view class="section-title">最新上线</view>
        <u-grid :col="3" :border="false" class="new-list">
            <view class="new-item bg-gold">
                <view class="item-title item-one">藏金普惠</view>
                <view class="item-desc"> 融资信用服 </view>
                <view class="item-desc"> 务平台助力 </view>
                <view class="item-desc"> 微小企业 </view>
            </view>
            <view class="new-item bg-blue">
                <view class="item-title">用电报装</view>
                <view class="item-desc"> 申报小微企 </view>
                <view class="item-desc"> 业用电服务 </view>
                <view class="item-desc"> 新装事项 </view>
            </view>
            <view class="new-item bg-red">
                <view class="item-title">电费</view>
                <view class="item-desc"> 缴纳电费相 </view>
                <view class="item-desc"> 关便捷服务 </view>
            </view>
        </u-grid>

        <!-- 主题专区 -->
        <view class="section-title">主题专区</view>
        <u-grid :col="2" :border="false" class="theme-grid">
            <u-grid-item v-for="(item, idx) in themeList" :key="idx" class="theme-item">
                <view class="theme-right">
                    <image :src="item.icon" class="theme-icon" />
                </view>
                <view class="theme-left">
                    <view class="theme-title">{{ item.title }}</view>
                    <view class="theme-content">{{ item.content }}</view>
                </view>
            </u-grid-item>
        </u-grid>

        <u-tabbar :list="tabbarList" :current="0" />
    </view>
</template>

<script>
import areaList from '@/static/area.js';
export default {
    data() {
        return {
            bannerList: [
                require('@/static/image/lb3.jpg'),
                ('@/static/image/lb4.jpg'),
                require('@/static/image/lb1.jpg'),
                require('@/static/image/lb2.jpg')
            ],
            themeList: [
                {
                    title: '营商环境',
                    icon: require('@/static/c2.png'),
                    content: '高新技术企业查询营商环境'
                },
                {
                    title: '跨省通办',
                    icon: require('@/static/c3.png'),
                    content: '跨省通办相关服务'
                },
                {
                    title: '生活服务',
                    icon: require('@/static/c4.png'),
                    content: '生活服务'
                },
                {
                    title: '一件事一次办',
                    icon: require('@/static/c5.png'),
                    content: '一件事一次办'
                }
            ],
            tabbarList: [
                {
                    iconPath: '/static/c6.png',
                    selectedIconPath: '/static/c6.png',
                    text: '首页'
                },
                {
                    iconPath: '/static/c7.png',
                    selectedIconPath: '/static/c7.png',
                    text: '办事'
                },
                {
                    iconPath: '/static/c8.png',
                    selectedIconPath: '/static/c8.png',
                    text: '我的'
                }
            ],
            showPicker: false,
            areaList: areaList, // 原始数据
            columns: [], // picker用的columns
            selectedIndex: [0, 0, 0],
            selectedRegion: [],
            src: '@/static/image/sacnCode.jpg'
        };
    },
    computed: {
        selectedRegionText() {
            if (this.selectedRegion[0] === '540000') return '西藏自治区';
            return '请选择地区';
        }
    },
    created() {
        this.initColumns();
    },
    methods: {
        // 点击扫码按钮
        scanCodeHandle() {
            uni.scanCode({
                success: (res) => {
                    console.log('扫码成功', res);
                },
                fail: (err) => {
                    console.log('扫码失败', err);
                },
                complete: () => {
                    console.log('扫码结束');
                }
            });
        },
        // 初始化省市区
        initColumns() {
            this.selectedIndex = [0, 0, 0];
            this.columns = [
                this.areaList[0], // 所有省份
                this.areaList[1][0], // 第一个省份的所有市
                this.areaList[2][0][0] // 第一个省份的第一个市的所有区
            ];
        },
        onPickerChange(e) {
            const { columnIndex, valueIndex } = e;
            let [p, c, d] = this.selectedIndex;
            if (columnIndex === 0) {
                p = valueIndex;
                c = 0;
                d = 0;
            } else if (columnIndex === 1) {
                c = valueIndex;
                d = 0;
            } else if (columnIndex === 2) {
                d = valueIndex;
            }
            this.selectedIndex = [p, c, d];
            this.columns = [this.areaList[0], this.areaList[1][p], this.areaList[2][p][c]];
        },
        onRegionConfirm(e) {
            this.selectedRegion = e.value.map((item) => item.value);
            this.showPicker = false;
        }
    }
};
</script>

<style scoped>
.container {
    background: #fff;
    min-height: 100vh;
}

.top-bar {
    padding: 16rpx 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.head-right {
    display: flex;
}

.weather {
    color: #888;
    margin-right: 16rpx;
}

.section-title {
    margin: 50rpx 0 40rpx 30rpx;
    font-weight: bold;
    font-size: 32rpx;
}

.theme-left {
    width: 100%;
}

.theme-grid {
    display: flex;
    justify-content: center !important;
}

.theme-item {
    background: #f1f1f1 !important;
    width: 45% !important;
    margin: 5px;
    height: 150px;
    padding: 0 15px;
}

.new-list {
    display: flex;
    justify-content: space-around !important;
    align-items: baseline;
}

.new-item {
    border-radius: 16rpx;
    text-align: center;
    padding: 16rpx 0;
    width: 100px;
    height: 100px;
}

.bg-gold {
    background: #fff7e6;
    color: #bfa14a;
}

.bg-blue {
    background: #e6f7ff;
    color: #1890ff;
}

.bg-red {
    background: #fff1f0;
    color: #ff4d4f;
}

.item-title {
    font-size: 28rpx;
    font-weight: bold;
}

.item-one {
    color: #7f4410;
}

.item-desc {
    font-size: 24rpx;
    margin-top: 8rpx;
    color: #909095;
}

.theme-icon {
    width: 64rpx;
    height: 64rpx;
    margin-bottom: 8rpx;
}

.theme-title {
    font-size: 28rpx;
}

.theme-content {
    color: #9b9b9c;
}

.icon {
    width: 80rpx;
    height: 80rpx;
    display: block;
}

.head-left {
    display: flex;
    align-items: center;
}

.location-bar {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    padding: 16rpx 0;
}

.location-text {
    margin-left: 8rpx;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.swiper-list {
    border-radius: 20px !important;
    margin: 10px;
}
</style>
